<template>
  <div class="personal-intro">
    <section class="intro">
      <h2>个人介绍</h2>
      <p>你好！我是一名充满热情的前端开发工程师，专注于创建用户友好和高性能的 Web 应用。我热爱学习新技术，并且享受将创意转化为现实的过程。</p>
    </section>

    <section class="experience">
      <h2>个人经历</h2>
      <div class="timeline">
        <div v-for="(exp, index) in experiences" :key="index" class="timeline-item">
          <div class="year">{{ exp.year }}</div>
          <div class="description">{{ exp.description }}</div>
        </div>
      </div>
    </section>

    <section class="projects">
      <h2>个人项目</h2>
      <div id="projects-cube"></div>
      <ul class="project-list">
        <li v-for="project in projects" :key="project.name">
          <a :href="project.url" target="_blank">{{ project.name }}</a>
        </li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import gsap from 'gsap';
import * as THREE from 'three';

const experiences = ref([
  { year: '2022', description: '开始学习HTML、CSS、JavaScript' },
  { year: '2023', description: '开始学习Vue2/Vu3' },
  { year: '2023', description: '开始学习Node和Java' },
  { year: '2024', description: '搭建个人博客成功!' },
]);

const projects = ref([
  { name: 'JavaFX实现医院信息管理系统', url: 'https://github.com/Lade-Doing/Hospital-management-system' },
  { name: 'Vue2+EasyMock实现的图书信息管理系统', url: 'https://github.com/Lade-Doing/Easy-Mock-Vue2-Library-Manage' },
  { name: '品优购静态页面项目', url: 'https://github.com/Lade-Doing/It-Ping-You-Gou'},
  { name: '基于Node库(art-template)实现的黑马博项目', url: 'https://github.com/Lade-Doing/Based-in-art-template-s-Blog' },
  { name: '基于Express+Vue3实现的个人博客项目', url: 'https://github.com/Lade-Doing/easy-blog'},
  { name: '一个组合swagger-api的Node项目', url: 'https://github.com/Lade-Doing/swagger-ui-express' },
  { name: '一个Vuex4的官方小demo复现', url: 'https://github.com/Lade-Doing/vue-store-cart' },
  { name: '一个ChatGPT静态网页', url: 'https://github.com/Lade-Doing/ChatGPT' },
  { name: '一个背单词的网站', url: 'https://gitee.com/koreantion/koreantion' },
  { name: '收集国内AI的静态网站页面' , url: 'https://gitee.com/koreantion/aicn_website'},
  { name: 'VuePress搭建的Demo文档', url: "https://gitee.com/koreantion/vue-press-docs" },
  { name: '基于Hexo博客框架和anzhiyu主题搭建的博客', url: 'https://gitee.com/koreantion/anzhiyu-blog' },
  { name: 'Zen Heart Alarm Clock(禅心闹钟)', url: 'https://gitee.com/koreantion/Zen_Heart_Alarm_Clock' },
  { name: '水果识别后台管理系统', url: 'https://gitee.com/koreantion/fruit-admin-page' },
  { name: '水果识别后台管理系统API服务器', url: 'https://gitee.com/koreantion/fruit-recognition-backendAPI' },
  { name: '线狮后台管理系统登录认证中心', url: 'https://gitee.com/koreantion/authentication-center' },
  { name: '线狮少年后台微信小程序', url: 'https://gitee.com/koreantion/line-lion-wechat-mini-program' },
  { name: '线狮后台管理系统', url: 'https://gitee.com/koreantion/background-management-system' },
  { name: '线狮后台管理API系统', url: 'https://gitee.com/koreantion/xssn-parent' },
  { name: '博客论坛后端项目', url: 'https://gitee.com/koreantion/lt_blog_boot' },
  { name: '博客论坛前端项目', url: 'https://gitee.com/koreantion/It_blog_web' },
  { name: 'Vue3+Vue-Router+Vuex4快速搭建系统', url: 'https://github.com/Lade-Doing/Vue3-Vite-Web' }
]);

onMounted(() => {
  animateTimeline();
  initProjectsCube();
});

const animateTimeline = () => {
  gsap.from('.timeline-item', {
    opacity: 0,
    y: 50,
    stagger: 0.2,
    duration: 1,
    ease: 'power2.out'
  });
};

const initProjectsCube = () => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ alpha: true });

  renderer.setSize(300, 300);
  document.getElementById('projects-cube').appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const materials = projects.value.map(project => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = 128;
    canvas.height = 128;
    context.fillStyle = '#ffffff';
    context.fillRect(0, 0, 128, 128);
    context.font = '16px Arial';
    context.fillStyle = '#000000';
    context.fillText(project.name, 10, 64);
    return new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(canvas) });
  });

  const cube = new THREE.Mesh(geometry, materials);
  scene.add(cube);

  camera.position.z = 2;

  const animate = () => {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  };

  animate();
};
</script>

<style scoped>
.personal-intro {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h2 {
  color: #333;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.intro p {
  line-height: 1.6;
}

.timeline {
  position: relative;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  height: 100%;
  width: 2px;
  background: #3498db;
}

.timeline-item {
  margin-bottom: 20px;
  padding-left: 40px;
  position: relative;
}

.timeline-item .year {
  font-weight: bold;
  margin-bottom: 5px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  width: 16px;
  height: 16px;
  background: #3498db;
  border-radius: 50%;
}

#projects-cube {
  width: 300px;
  height: 300px;
  margin: 20px auto;
}

.project-list {
  list-style-type: none;
  padding: 0;
}

.project-list li {
  margin-bottom: 10px;
}

.project-list a {
  color: #3498db;
  text-decoration: none;
}

.project-list a:hover {
  text-decoration: underline;
}
</style>